<template>
	<div class="index">
		<h2>新闻资讯</h2>
		<ul style="list-style:none;" v-for="(item,key) in newsList">
			<news-cell :newsItem="item" :key="key"></news-cell>
		</ul>
	</div>
</template>

<script>
	import api from "./../axios/api.js"
	import NewsCell from './NewsCell.vue'
	export default{
		name:"index",
		data(){
			return{
				newsList:[]
			}
		},
		components:{
			NewsCell
		},
		created(){
			this.setNewApi();
		},
		methods:{
			setNewApi:function () {
				api.JH_news('/news/index','type=top&key=123456')
				.then(res=>{
					console.log(res);
					this.newsList = res.articles;
				})
			}
		}
	}
</script>

<style scoped>
	.topNav{
	  width: 100%;
	  background: #ED4040;
	  position: fixed;
	  top:0rem;
	  left: 0;
	  z-index: 10;
	}
	.simpleNav{
	  width: 100%;
	  line-height: 1rem;
	  overflow: hidden;
	  overflow-x: auto;
	  text-align: center;
	  font-size: 0;
	  font-family: '微软雅黑';
	  white-space: nowrap;
	}
	.simpleNav::-webkit-scrollbar{height:0px}
	.simpleNavBar{
	  display: inline-block;
	  width: 1.2rem;
	  color:#fff;
	  font-size:0.3rem;
	}
	.navActive{
	  color: #000;
	  border-bottom: 0.05rem solid #000;
	}
	.placeholder{
	  width:100%;
	  height: 1rem;
	}
</style>